<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>盒子立体转换</title>
		<style type="text/css">
			.father{
				width: 600px;
				height: 300px;
				position: relative;
				transition: all 1s;
				perspective: 1000px;
				transform-style: preserve-3d;			/*实现3D效果*/
			}
			.di1,.di2{
				width: 50%;
				height: 100%;
				position: absolute;
			}
			.di1{
				background: #0086B3;
				transform: translateZ(100px);
			}
			.di2{

				background: pink;
			}
			.father:hover{
				transform: rotateY(90deg);
			}
		</style>
	</head>
	<body>
		<div class="father">
			<div class="di1">前面</div>
			<div class="di2">后面</div>
		</div>
	</body>
</html>
